<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      style="
        position: absolute;
        width: 400px;
        height: 120px;
        /* border: 1px solid red; */
      "
    >
      <div
        class="tHeader"
        style="
          width: 100%;
          height: 30px;
          color: aliceblue;
          font-weight: bold;
          background-image: url(theader.png);
          background-repeat: no-repeat;
          background-size: cover;
          opacity: 0.8;
        "
      >
        <span style="padding-left: 20px; line-height: 30px">
          ${graphic.attr.posData.sourceName}</span
        >
      </div>
      <div
        style="
          margin-top: 5px;
          margin-left: 20px;
          width: 90%;
          height: calc(100% - 35px);
          background: rgba(11, 25, 34, 0.9);
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 3px 3px 5px rgba(11, 25, 34, 0.4);
        "
      >
        <table
          style="
            width: 90%;
            height: 100%;
            color: lightgray;
            font-size: 14px;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
            border-collapse: collapse;
          "
        >
          <tr>
            <td
              style="
                font-weight: bold;
                text-shadow: 0 0 3px rgb(191, 243, 247);
                color: rgb(179, 247, 251);
              "
            >
              点位类型:
            </td>
            <td>${graphic.attr.posData.sourceType}</td>
          </tr>
          <tr>
            <td
              style="
                font-weight: bold;
                text-shadow: 0 0 3px rgb(191, 243, 247);
                color: rgb(179, 247, 251);
              "
            >
              点位编号:
            </td>
            <td>${graphic.attr.posData.sourceCode}</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>
